<template>
  <div class="resource-main-box">
    <h3 class="fw-b">邮件</h3>
    <div class="content-top">
      <div class="inputItems">
        <a-input placeholder="onwer" addon-before="拥有者" allow-clear style="width:200px" />
        <a-input placeholder="date" addon-before="时间" allow-clear style="width:200px" />
        <a-radio>Enabled</a-radio>
      </div>
      <div class="articleArea">123</div>
    </div>
    <a-divider />
    <div class="content-bottom">
      <a-tabs default-active-key="1" type="card" @change="changeTabHandler">
        <a-tab-pane key="1" tab="tails">
          <div class="air-content">
            <airlineTransfer :airline-list="ftmAirlineList" title="航空公司" />
            <airFleetTransfer :air-fleet-list="ftmFleetList" title="机队" />
            <airModelTransfer :air-model-list="ftmPlaneModelList" title="机型" />
            <airtailNumberTransfer :airtail-number="ftmAirplaneList" title="机号" />
            <div class="btns-content">
              <a-button type="danger" style="margin-left:10px">
                帮助
              </a-button>
              <a-button type="danger" style="margin-left:10px">
                删除并返回
              </a-button>
              <a-button type="danger" style="margin-left:10px">
                另存为
              </a-button>
              <a-button type="danger" style="margin-left:10px">
                删除
              </a-button>
              <a-button type="danger" style="margin-left:10px">
                取消
              </a-button>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="Reports/events" force-render>
          <div class="reports-content">
            <div class="reports-top">
              <fcmEvent :fmc-event-list="FmcEventList" />
              <cmcEvent :cmc-event-list="CmcEventList" />
            </div>
            <div class="reports-bottom">
              <ACMTransfer />

              <AHMTransfer />

              <snapshotTransfer />

              <starTransfer />
            </div>
            <div class="btns-content">
              <a-button type="danger" style="margin-left:10px">
                帮助
              </a-button>
              <a-button type="danger" style="margin-left:10px">
                删除并返回
              </a-button>
              <a-button type="danger" style="margin-left:10px">
                另存为
              </a-button>
              <a-button type="danger" style="margin-left:10px">
                删除
              </a-button>
              <a-button type="danger" style="margin-left:10px">
                取消
              </a-button>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="3" tab="Flaut Items">
          <div class="flaut-content">
            <div v-for="(item,index) in [1,1,1,1]" :key="index" class="transfer-item">
              <div class="item-top">
                <span>Fdes to detect</span>
                <div class="filter-btns">

                  <a-button type="danger" style="margin-left:10px">
                    重置
                  </a-button>
                  <a-button type="danger" style="margin-left:10px">
                    查询
                  </a-button>
                </div>
              </div>
              <div class="filter-conditions">
                <span style="margin-right:10px">筛选条件:</span>
                <a-input placeholder="Basic usage" addon-before="ATA" style="width:130px" />
                <a-input placeholder="Basic usage" addon-before="code Number" style="width:200px" />
                <a-input placeholder="Basic usage" addon-before="名称" style="width:130px" />
              </div>
              <div class="radio-content">
                <span style="margin-right:10px">Action:</span>
                <a-radio-group v-model="value">
                  <a-radio :value="1">
                    Option A
                  </a-radio>
                  <a-radio :value="2">
                    Option B
                  </a-radio>
                </a-radio-group>
              </div>
              <div style="display:flex;justify-content:center;">
                <a-transfer
                  :data-source="mockData"
                  :titles="['Source', 'Target']"
                  :target-keys="targetKeys"
                  :selected-keys="selectedKeys"
                  :render="item => item.title"
                  :disabled="disabled"
                  @change="handleChange"
                  @selectChange="handleSelectChange"
                  @scroll="handleScroll"
                />
              </div>
            </div>
            <div class="fault-btns">

              <a-button type="danger" style="margin-left:10px">
                帮助
              </a-button>
              <a-button type="danger" style="margin-left:10px">
                删除并返回
              </a-button>
              <a-button type="danger" style="margin-left:10px">
                另存为
              </a-button>
              <a-button type="danger" style="margin-left:10px">
                删除
              </a-button>
              <a-button type="danger" style="margin-left:10px">
                取消
              </a-button>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="4" tab="ATA/Priority/MMSG">
          <div class="ATA-content">
            <div class="ATA-top">
              <div style="margin-bottom:15px">测试</div>
              <div class="radio-groups">
                <a-radio-group v-model="value">
                  <a-radio :value="1">
                    Option A
                  </a-radio>
                  <a-radio :value="2">
                    Option B
                  </a-radio>
                </a-radio-group>
              </div>
              <a-transfer
                :data-source="mockData"
                :titles="['Source', 'Target']"
                :target-keys="targetKeys"
                :selected-keys="selectedKeys"
                :render="item => item.title"
                :disabled="disabled"
                @change="handleChange"
                @selectChange="handleSelectChange"
                @scroll="handleScroll"
              />
            </div>
            <div class="ATA-bottom">
              <div style="display:flex;justify-content:space-between;">
                <div v-for="(item,index) in [1,1,1]" :key="index" class="ATA-items">
                  <div class="ATA-items-top">
                    <span>Flight Deck Effects</span>
                    <div class="items-top-fullLine">
                      <a-radio-group v-model="value">
                        <a-radio :value="1">
                          Option A
                        </a-radio>
                        <a-radio :value="2">
                          Option B
                        </a-radio>
                      </a-radio-group>
                      <div class="ATA-selects-content">
                        <span>优先级</span>
                        <a-select default-value="Option1-1">
                          <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
                          <a-select-option value="Option1-1">
                            Option1-1
                          </a-select-option>
                          <a-select-option value="Option1-2">
                            Option1-2
                          </a-select-option>
                        </a-select>
                      </div>
                    </div>
                  </div>
                  <div class="ATA-items-bottom">
                    <div class="items-bottom-left">
                      <div>flight</div>
                      <div>
                        <a-checkbox-group v-model="checkedList" :options="plainOptions" />
                      </div>
                    </div>
                    <div class="items-bottom-right">
                      <div>code</div>
                      <div>
                        <a-checkbox-group v-model="checkedList" :options="plainOptions" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="ATA-btns">
                <a-button type="danger" style="margin-left:10px">
                  帮助
                </a-button>
                <a-button type="danger" style="margin-left:10px">
                  删除并返回
                </a-button>
                <a-button type="danger" style="margin-left:10px">
                  另存为
                </a-button>
                <a-button type="danger" style="margin-left:10px">
                  删除
                </a-button>
                <a-button type="danger" style="margin-left:10px">
                  取消
                </a-button>
              </div>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="5" tab="Airports">
          <div class="airports-content">
            <airComponent air-title="起飞机场" />
            <airComponent air-title="到达机场" style="margin-top:15px" />
            <div class="air-btns">
              <a-button type="danger" style="margin-left:10px">
                帮助
              </a-button>
              <a-button type="danger" style="margin-left:10px">
                删除并返回
              </a-button>
              <a-button type="danger" style="margin-left:10px">
                另存为
              </a-button>
              <a-button type="danger" style="margin-left:10px">
                删除
              </a-button>
              <a-button type="danger" style="margin-left:10px">
                取消
              </a-button>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="6" tab="Delivery Options">
          <div class="delivery-content">
            <div class="delivery-main-container">
              <div class="delivery-content-left">
                <div class="delivery-item">
                  <span>测试标题</span>
                  <div class="delivery-item-box">
                    <div v-for="(item,index) in [1,1,1,1]" :key="index" style="margin-bottom:8px">
                      <span style="margin-right:20px">模拟标题</span>
                      <a-select default-value="lucy" style="width: 220px">
                        <a-select-option value="jack">
                          Jack
                        </a-select-option>
                      </a-select>
                    </div>
                  </div>
                </div>
                <div class="delivery-item">
                  <span>测试标题</span>
                  <div class="delivery-item-box">
                    <div v-for="(item,index) in [1,1,1,1]" :key="index" style="margin-bottom:8px">
                      <span style="margin-right:20px">模拟标题</span>
                      <a-select default-value="lucy" style="width: 220px">
                        <a-select-option value="jack">
                          Jack
                        </a-select-option>
                      </a-select>
                    </div>
                  </div>
                </div>
                <div class="receving-address">
                  <div class="receving-address-top">
                    <span>接收地址</span>
                    <a-button type="primary" size="small">
                      添加地址
                    </a-button>
                  </div>
                  <div class="receving-address-bottom">
                    <div v-for="item in [1,2,3,4]" :key="item" class="address-bottom-item">
                      <span>随便的数据啦</span>
                      <a-icon type="close" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="delivery-content-right">
                <a-transfer
                  :data-source="mockData"
                  :titles="['Source', 'Target']"
                  :target-keys="targetKeys"
                  :selected-keys="selectedKeys"
                  :render="item => item.title"
                  :disabled="disabled"
                  @change="handleChange"
                  @selectChange="handleSelectChange"
                  @scroll="handleScroll"
                />
              </div>
            </div>
            <div class="delivery-btns">
              <a-button type="danger" style="margin-left:10px">
                帮助
              </a-button>
              <a-button type="danger" style="margin-left:10px">
                删除并返回
              </a-button>
              <a-button type="danger" style="margin-left:10px">
                另存为
              </a-button>
              <a-button type="danger" style="margin-left:10px">
                删除
              </a-button>
              <a-button type="danger" style="margin-left:10px">
                取消
              </a-button>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>
<script>
import airComponent from '../../../components/resourceTool/airInformation';
import { mapActions, mapState } from 'vuex';
import airlineTransfer from './components/tails/airlineTransfer';
import airFleetTransfer from './components/tails/airFleetTransfer';
import airModelTransfer from './components/tails/airModelTransfer';
import airtailNumberTransfer from './components/tails/airtailNumberTransfer';
import fcmEvent from './components/reports/fcmEvent';
import cmcEvent from './components/reports/cmcEvent';
import ACMTransfer from './components/reports/ACMTransfer';
import AHMTransfer from './components/reports/AHMTransfer';
import snapshotTransfer from './components/reports/snapshotTransfer';
import starTransfer from './components/reports/starTransfer';
export default {
  components: {
    airComponent,
    airlineTransfer,
    airFleetTransfer,
    airModelTransfer,
    airtailNumberTransfer,
    fcmEvent,
    cmcEvent,
    ACMTransfer,
    AHMTransfer,
    snapshotTransfer,
    starTransfer

  },
  data() {
    return {
    };
  },
  computed: {
    ...mapState('fraMonitoring', ['ftmAirlineList', 'ftmFleetList', 'ftmPlaneModelList', 'ftmAirplaneList']),
    ...mapState('emailNotification', ['CmcEventList', 'FmcEventList'])
  },
  methods: {
    ...mapActions('emailNotification', ['getCmcEventList', 'getFmcEventList']),
    changeTabHandler(e) {
      switch (e) {
        case '2':
          this.getCmcEventList({ type: 1 });
          this.getCmcEventList({ type: 2 });
          this.getCmcEventList({ type: 3 });
          // this.getFmcEventList();
          break;
      }
    },
    handleChange(nextTargetKeys, direction, moveKeys) {
      this.targetKeys = nextTargetKeys;

      console.log('targetKeys: ', nextTargetKeys);
      console.log('direction: ', direction);
      console.log('moveKeys: ', moveKeys);
    },
    selectChange() {
    },
    handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
      this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys];

      console.log('sourceSelectedKeys: ', sourceSelectedKeys);
      console.log('targetSelectedKeys: ', targetSelectedKeys);
    },
    handleScroll(direction, e) {
      // console.log('direction:', direction);
      // console.log('target:', e.target);
    },
    handleDisable(disabled) {
      this.disabled = disabled;
    }
  }

};
</script>
<style lang="less" scoped>

.content-top {
    display: flex;
    justify-content: space-around;
    align-items:center;
    .inputItems {
        display: flex;
        flex-direction: column;
         /deep/.ant-input-wrapper {
            margin-bottom: 10px!important;
        }
    //    :nth-child(1){
    //        margin-bottom: 10px;
    //    }
    }
    .articleArea {
        width: 400px;
        height: 150px;
        border: 1px solid #EC808D;
        padding: 5px;
        box-sizing: border-box;
        border-radius: 5px;
    }
}
.content-bottom {
    .reports-top {
        // display: flex;
        margin-bottom: 30px;
    //     .checkbox-groups {
    //         margin-bottom: 30px;
    //         .groups{
    //         display: flex;
    //         flex-direction: column;
    //         border: 1px solid #DDDDDD;
    //         border-radius: 5px;
    //         padding: 7px;
    //         box-sizing: border-box;
    //         margin-top: 5px;
    //         /deep/.ant-checkbox-wrapper {
    //             margin-left: 0;
    //         }
    // }
    //     }
    }
}
.reports-bottom {
   text-align: center;
}
.btns-content {
    text-align: right;
}
.transfer-item {
  width: 47%;
  margin-bottom: 20px;
}
.filter-conditions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  // margin-top: 15px;
}
  .filter-btns {
    display: flex;
    justify-content: flex-start;
    margin-top: 15px;
  }
  .radio-content {
    margin: 15px 0;
  }
  .flaut-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
.item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fault-btns,
.ATA-btns,
.air-btns,
.delivery-btns {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.radio-groups {
  margin-bottom: 15px;
}
.ATA-top {
  margin-bottom: 30px;
}
.ATA-items {
  border: 1px solid #797979;
  width: 33%;
  box-sizing: border-box;
.items-top-fullLine {
  display: flex;
  align-items: center;
  .ATA-selects-content {
    span {
      margin-right: 5px;
    }
  }
}
}
.ATA-items-top {
  border-bottom: 1px solid #797979;
  padding: 5px;
  box-sizing: border-box;
}
.ATA-items-bottom {
  display: flex;
  >div {
    width: 50%;
    >div:nth-child(1){
        line-height: 40px;
        text-align: center;
        border-bottom: 1px solid #797979;
    }
    >div {
        height: 50px;
    }
  }
  >div:nth-child(1){
    border-right: 1px solid #797979;
  }
}
.delivery-item {
  width: 450px;
  margin-bottom: 15px;
}
.delivery-item-box {
  border: 1px solid #797979;
  padding: 8px;
  box-sizing: border-box;
  margin-top: 10px;
}
.receving-address {
  width: 50%;
  border: 1px solid #EBECEF;
  .receving-address-top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #EBECEF;
    padding: 5px 10px;
    box-sizing: border-box;
    background:#F5F7FA
  }
  .receving-address-bottom {
    background: #F2F2F2;
    .address-bottom-item {
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
      align-items: center;
    }
    :not(:last-child){
      margin-bottom:3px
    }
  }
}
.delivery-main-container {
  display: flex;
  align-items: center;
  .delivery-content-right {
    margin-left: 150px;
  }
}
.air-content {
  text-align: center;
}
.reports-content {
  padding: 15px;
}

</style>
